<template>
  <div ref="editor" :style="style"></div>
</template>

<script>
import { setLocaleData } from 'monaco-editor-nls'
import zh_CN from 'monaco-editor-nls/locale/zh-hans'
setLocaleData(zh_CN)
const monaco = require('monaco-editor/esm/vs/editor/editor.api')

export default {
  name: 'MonacoEditor',
  data() {
    return {
      monacoEditor: null,
      style: {
        width: '100%',
        height: '100%'
      },
      editorConfig: {
        value: `console.log("hello,world")`,
        // 主题,vs:亮色,vs-dark:暗色
        theme: 'vs-dark',
        // 渲染支持的语言：https://microsoft.github.io/monaco-editor/
        language: 'javascript',
        // 自动调整大小
        automaticLayout: true,
        // 允许滚动到最后一行后的一个屏幕大小。默认值为true
        scrollBeyondLastLine: false,
        // 自动缩进
        autoIndent: true,
        // 自动换行规则
        wordWrap: 'on'
      }
    }
  },
  mounted() {
    this.renderEditor()
  },
  methods: {
    // 渲染monaco编辑器
    renderEditor() {
      this.monacoEditor = monaco.editor.create(this.$refs.editor, {
        ...this.editorConfig
      })
      this.monacoEditor.onDidChangeModelContent(event => {
        console.log(this.monacoEditor.getValue())
      })
    },
    // 销毁编辑器
    destroyEditor() {
      this.monacoEditor.dispose()
    },
    // 窗口改变大小时，重新渲染编辑器
    resizeHandle(e) {
      this.monacoEditor.layout()
    },
    // 赋值
    setValue(val) {
      this.monacoEditor.setValue(val)
    },
    // 修改语言
    setModelLanguage(lang) {
      monaco.editor.setModelLanguage(this.monacoEditor.getModel(), lang)
    }
  }
}
</script>
